<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
</head>
<link rel="stylesheet" type="text/css" href="webuploader.css">
<script src="jq.js"></script>
<script src="webuploader.js"></script>
<style>
    #upload-container,#upload-list{width: 500px;margin: 0 auto}
    #upload-container{cusor:pointer;border-radius: 15px;background: #EEEFFF;height: 200px}
    #upload-list{height: 800px;border: 1px solid #EEE;border-radius: 5px;margin-top: 10px;padding: 2px}
    #upload-container>span{windows:100%;text-align: center;color: gray;display: block}
    .upload-item{margin-top: 5px;padding-bottom: 5px;border-bottom: 1px dashed gray}
    .percentage{height: 5px;background: green}
    .btn-delete,.btn-retry{cusor:pointer;color: gray}
</style>
<body>
<div id="upload-container">
    <span>点击或者文件拖拽至此上传</span>
</div>
<div id="upload-list">
</div>
<button id="picker">点击上传文件</button>
</body>
<script>
    //待上传文件的md5值（key为file id）
    var md5 = {};
    $('#upload-container').click(function (e) {
        $('#picker').find('input').click();
    });

    // WebUploader提供的钩子（hook），在文件上传前先判断服务是否已存在这个文件
    WebUploader.Uploader.register({
        'before-send-file': 'preupload'
    }, {
        preupload: function( file ) {
            var me = this,
                owner = this.owner,
                server =  me.options.server,
                deferred = WebUploader.Deferred();
            owner.md5File( file.source )
            // 如果读取出错了，则通过reject告诉webuploader文件上传出错。
                .fail(function() {
                    deferred.reject();
                })
                // md5值计算完成
                .then(function( val ) {
                    md5[file.id] = val;
                    // owner.skipFile(file);
                    // console.log('文件重复，已跳过');
                    // // 介绍此promise, webuploader接着往下走。
                    deferred.resolve();
                    debugger
                    // 与服务安验证
                     $.ajax('api/md5?md5='+val, {
                         type:'get',
                         success: function( response ) {
                                debugger
                             // 如果验证已经上传过
                              if ( response.exist ) {
                                 owner.skipFile(file);
                                 // 拿到原结果结果
                                    //response.result
                                 console.log('文件重复，已跳过');

                    //             // 介绍此promise, webuploader接着往下走。
                                 //deferred.resolve();
                              }
                         }
                     });
                });
            return deferred.promise();
        }
    });

    // 初始化Web Uploader
    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        // swf文件路径
        swf: 'Uploader.swf',
        // 文件接收服务端。
        server: 'api/upload',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',
        multiple:true,//多文件
        chunked:true,//开启分片上传
        threads:20,
        method:'POST',
        fileSizeLimit:1024*1024*1024*10,
        fileSingleSizeLimit:1024*1024*1024,
        fileVal:'upload'
        // ,
        // // 只允许选择图片文件。
        // accept: {
        //     title: 'Images',
        //     extensions: 'gif,jpg,jpeg,bmp,png',
        //     mimeTypes: 'image/*'
        // }
    });
    //文件入队列之前触发的事件，拖进去
    uploader.on('beforeFileQueued',function (file) {
        console.log(file);
    });

    //文件入队列时触发的事件
    uploader.on('fileQueued',function (file) {
        //选中文件要做的事情，比如在页面中显示选中的文件并添加到文件列表，获取文件大小，文件类型等等
        console.log(file);
        var html = '<DIV class="upload-item"> <span>文件名'+file.name + '</span><span data-file_id = "'+file.id+'" class="btn-retry">重试</span><DIV class="percentage '+file.id+'" style="width: 0%;"></DIV></DIV>'
        $('#upload-list').append(html);
        //文件的唯一性  大文件秒传  已经存在了而已
        md5[file.id] = '';
        uploader.md5File(file)
        //及时显示进度条
            .progress(function (percentage) {
                console.log('percentage',percentage)
            })
            .then(function (val) {
                md5[file.id] = val;
                console.log('md5 result',val)
            })
    });
    uploader.on('uploadBeforeSend', function (obj, data, headers) {
        obj.md5=md5[obj.file.id];
        data.md5=md5[obj.file.id];
    });

    uploader.on('uploadProgress',function (file,percentage) {
        console.log(percentage*100 + '%')
        var width = $('.upload-item').width();
        $('.'+file.id).width(width * percentage);
    })

    uploader.on('success',function (file,response) {
        console.log(file.id +"sucess")
    })

    uploader.on('uploadError',function (file) {
        console.log(file.id +"uploadError")
    })

    uploader.on('uploadComplete',function (file) {
        console.log(uploader.getFiles() +"uploadError")
    })



</script>
</html>